<template>
  <div>
    <!--1. 顶部栏 -->
    <van-nav-bar fixed>
      <template #left>
        <!-- <img src="@/assets/logo.png" alt="" > -->
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button icon="search" round type="primary" @click="$router.push({path:'/search'})">搜索</van-button>
      </template>
    </van-nav-bar>
    <!--2. tabs栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in articleList"
              :key="item.art_id"
              :title="item.title"
              @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(it, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image :src="it" lazy-load />
                  </van-grid-item>
                </van-grid>
                <br />
                <span>{{ item.aut_name }}</span
                >&nbsp;&nbsp; <span>{{ item.comm_count }}</span
                >&nbsp;&nbsp;
                <span>{{ item.pubdate | fromNow }}</span>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入接口
import { getChannelList, getArticleList } from "./home.js";
// 导入moment.js
import moment from "moment";
// 设置语言
moment.locale("zh-cn");
export default {
  name: "home",
  data() {
    return {
      active: 0, //tabs栏点击
      loading: false, //加载更多动画
      finished: false, //是否加载完毕
      list: [], //列表数据
      isLoading: false, //下拉刷新动画
      channelList: [],
      timestamp: null,
      articleList: [],
    };
  },
  async created() {
    // 请求频道列表
    let res = await getChannelList();
    // 绑定数据
    this.channelList = res.data.data.channels;
  },
  methods: {
    // 1.加载更多数据
    async onLoad() {
      // 1.1判断是不是第一页
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }

      // 1.2发送请求
      let res = await getArticleList({
        channel_id: this.channelList[this.active].id,
        timestamp: this.timestamp,
      });
      // console.log(res);

      // 1.3存储服务器返回的时间戳,用于请求下一页数据
      this.timestamp = res.data.data.pre_timestamp;

      // 1.4绑定数据
      this.articleList.push(...res.data.data.results);

      // 1.5设置loading为false:作用是关闭加载中动画(表示本次数据加载完毕)
      this.loading = false;

      // 1.6限制最多数据100条,超过100条,设置finished属性为true:作用是不再触发onLoad
      if (this.articleList.length >= 100) {
        this.finished = true;
      }
    },

    // 2.下拉刷新数据
    onRefresh() {
      // (0)一旦下拉刷新,需要无条件设置list组件的finished为false
      this.finished = false;
      //  (1)关闭下拉刷新动画
      this.isLoading = false;
      // (2)清空列表与时间戳(从第一页来时加载)
      this.articleList = [];
      this.timestamp = null;
      // (3)开启加载更多的动画
      this.loading = true;
      // (4)主动触发加载更多的事件
      this.onLoad();
    },
    // 3.
    tabClick() {
      console.log(this.active);
      // (0)一旦下拉刷新,需要无条件设置list组件的finished为false
      this.finished = false;
      // (1)清空列表与时间戳(从第一页来时加载)
      this.articleList = [];
      this.timestamp = null;
      // (2)开启加载更多的动画
      this.loading = true;
      // (3)主动触发加载更多的事件
      this.onLoad();
    },
  },
  // 过滤器
  filters: {
    fromNow(value) {
      // console.log(this);
      //  转成相对时间
      return moment(value).fromNow();
    },
  },
};
</script>

<style lang="less">
// 顶部栏
.van-nav-bar {
  z-index: 2 !important;
  .logo {
    width: 100px;
    height: 30px;
    // 1.在背景图中使用@会默认给你前面添加一个   ./   ,导致路径错误
    // 2.解决方案:在@符号前面加一个~,去掉默认./
    background: url("~@/assets/logo.png") no-repeat;
    background-size: 100%;
  }

  // 右边按钮
  .van-nav-bar__right {
    .van-button {
      width: 100px;
      height: 35px;
      background-color: #00affd;
      border: none;

      .van-icon {
        color: #fff;
      }
    }
  }
}

// 2.tabs栏布局
.van-tabs {
  // 2.1头部tab栏
  .van-tabs__wrap {
    position: fixed;
    top: 46px;
    z-index: 10;
    width: 100%;
  }
  // 2.2内容
  .van-tabs__content {
    margin-top: 90px;
    margin-bottom: 50px;
  }
}
</style>